<template>
    <div class="newGoodsList">
        <header-tm></header-tm>
        <div class="banner">
            <img src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" alt="">
        </div>
        <div class="nav">
            <div class="item" @click="getzong" :class="sort == 1 ? 'active' : ''">综合</div>
            <div class="item" ref="sortArr" @click="getSort" :class="sort == 2 ? 'active' : ''">排序</div>
            <div class="item" @click="getcate" :class="sort == 3 ? 'active' : ''">分类</div>
        </div>
        <ul class="list">
        <li class="item" v-for="el in list" :key="el.id">
            <img :src="el.list_pic_url">
            <p class="cname">{{el.name}}</p>
            <p class="price">¥{{el.retail_price}}</p>
        </li>
    </ul>
    </div>
</template>
<script>
import Head from "../components/Header";
import { goodsList } from "../../../api/home/index"
import { mapState } from "vuex"
export default {
    data() {
        return {
            sort:0,
            num:1,
            list:[],
            show:null
        }
    },
    computed: {
        ...mapState(["isshow"])
    },
    methods: {
        init() {
            if (this.isshow != 0) {
                localStorage.setItem("isshow",JSON.stringify(this.isshow))
            }
            this.show = JSON.parse(localStorage.getItem("isshow"))
            if ( this.show == 1) {
                goodsList({isHot:'',isNew:'1',order:''}).then(res=>{
                this.list = res.data
                console.log(res);
            })
            } else if ( this.show == 2) {
                goodsList({isHot:'1',isNew:'',order:''}).then(res=>{
                this.list = res.data
                console.log(res);
            })
            }  
        },
        getzong() {
            this.init()
            this.sort = 1
            this.num = 1
        },
        getSort() {
            this.num++
            if (this.num % 2 != 0) {
                goodsList({isHot:'',isNew:'1',order:'desc'}).then(res=>{
                this.list = res.data
                console.log(res);
                console.log(this.$refs);
                this.$refs.sortArr.classList.add('add') 
                this.$refs.sortArr.classList.remove('jain') 
            })
            } else {
                goodsList({isHot:'',isNew:'1',order:'asc'}).then(res=>{
                this.list = res.data
                console.log(res);
                this.$refs.sortArr.classList.add('jain')
                this.$refs.sortArr.classList.remove('add')
            })
            }
            this.sort = 2
        },
        getcate() {
            this.init()
            this.sort = 3
            this.num = 1
        }
    },
    mounted() {
        this.init()
    },
    components: {
    "header-tm": Head,
  },
}
</script>
<style lang="scss" scoped>
.newGoodsList {
    .banner {
        width: 100%;
        height: 139px;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.nav {
    display: flex;
    height: 39px;
    background-color: #fff;
    .item {
        flex: 1;
        line-height: 39px;
        &:nth-child(2) {
            background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png') 2.2rem no-repeat;
            background-size: .2rem .28rem;
            &.add{
                background-image: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png");
            }
            &.jain {
                background-image: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png");

            }
        }
        &.active {
            color: #b4282d;
        }
    }
}
.list {
    background-color: #fff;
        overflow: hidden;
        border-top: 2px solid #f4f4f4;
        border-bottom: 2px solid #f4f4f4;
        .item {
            float: left;
            width: 50%;
            height: 242px;
            box-sizing: border-box;
            img {
                display: block;
                width: 150px;
                height: 150px;
                margin: 0 auto;
            }
            .price {
                font-size: 15px;
                color: #b4282d;
            }
            .cname {
                padding: 0 10px;
            }
            &:nth-child(odd) {
                border-right: 2px solid #f4f4f4;
                border-bottom: 2px solid #f4f4f4;
            }
            &:nth-child(even) {
                border-bottom: 2px solid #f4f4f4;
            }
        }
    }
</style>